<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="六级阅读：3天掌握必杀技">
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
      <template #left>
        <router-link to="/">
          <van-icon name="arrow-left" size="18" />
        </router-link>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <mt-swipe class="myswipe" :style="{ height: h }" :speed="300" :auto="5000">
      <mt-swipe-item>
        <img src="/swipe_pic/1.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/2.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/3.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/4.jpg" />
      </mt-swipe-item>
    </mt-swipe>
    <!--正文 -->
    <mt-navbar v-model="navactive">
      <mt-tab-item id="1"> 课程介绍 </mt-tab-item>
      <mt-tab-item id="2">课表目录 </mt-tab-item>
      <mt-tab-item id="3">老师介绍 </mt-tab-item>
      <mt-tab-item id="4">评价 </mt-tab-item>
    </mt-navbar>
    <mt-navbar v-model="navactive">
      <mt-tab-item style="color: red"> 限时抢购 </mt-tab-item>
      <mt-tab-item> </mt-tab-item>
      <mt-tab-item> </mt-tab-item>
      <mt-tab-item style="color: red"> 2021.09.01 </mt-tab-item>
    </mt-navbar>
    <img src="word/1.jpg" alt="" slot="icon" :style="{ height: w }" />

    <!-- 底部 -->
    <mt-tabbar fixed>
      <mt-tab-item><h3>免费领取</h3></mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      h: "123px",
      w: "350px",
      navactive: "navactive",
    };
  },
  methods: {
    initSwipHeigth() {
      // 计算轮播图的高度，对h变量进行赋值
      let picw = 414; // 图片宽度
      let pich = 130; // 图片高度
      let imgw = window.screen.width; // 屏幕的宽度
      let imgh = (imgw * pich) / picw + "px";
      this.h = imgh;
    },
    guanggaoWidth() {
      // 计算广告的高度，对w变量进行赋值
      let picw = 750; // 图片宽度
      let pich = 6064; // 图片高度
      let imgw = window.screen.width; // 屏幕的宽度
      let imgh = (imgw * pich) / picw + "px";
      this.w = imgh;
    },
  },
  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted() {
    // 轮播图适配高度
    this.initSwipHeigth();
    //广告适配高度
    this.guanggaoWidth();
  },
};
</script>
<style scoped>
span {
  text-align: center;
}
</style>